<template>
	<view :data-theme='theme()' :class="theme() || ''">
		<view class="index_bgc"></view>
		<view class="top_head pr">
			<view class="head_top" :style="'height:'+topBarTop()+'px;'"></view>
			<view class="d-f" :style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;'">
				<view class="index_log">
					<image :src="toplogo || ''" mode="aspectFill"></image>
				</view>
				<view class="topTitle"
					:style="'height:'+topBarHeight()+' px;lineHeight:'+topBarHeight()+' px;' ">
					{{topTitle}}
				</view>
			</view>
			<view class="new_search_box" @click.stop="go_search">
				<view class="new_address">
					<text class="icon iconfonts icon-dizhiguanli"></text>
					<text>{{region}}</text>
				</view>
				<view class="new_search">
					<text class="icon iconfont icon-sousuo"></text>
					<text style="padding-left: 20rpx;">请输入搜索内容</text>
				</view>
			</view>
		</view>
		<diy style="position: relative;" :diyItems="items"></diy>


		<view class="form_title d-b-c">
			<view class="">商家推荐</view>
			<view @click="goShoplist" style="font-size: 24rpx;font-weight: normal;color: #999;">查看更多</view>
		</view>
		<view class="fff_box" v-for="(item,index) in ShopList" :key="index" @click="goShop(item)">
			<view class="store_logo">
				<image :src="item.logos?item.logos:require('@/static/noimg.png')" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="main">
					<view class="store_name">
						{{item.name}}
					</view>
					<view class="frsjnr">
						<view class="fraction">
							{{item.server_score}}分
						</view>
						<view class="distance">
							{{item.km.toFixed(2)}}km
						</view>
					</view>
					<view class="cate_show">
						主营业务：{{item.category_name}}
					</view>
					<view class="onTime">
						营业时间：{{item.work_time?item.work_time:'全天营业'}}
					</view>
				</view>
				<view class="product-list">
					<view class="product-item" v-for="(row,i) in item.productList" :key="i"
						@tap.stop="goPriduct(row)">
						<view class="product-image">
							<image :src="row.image[0].file_path" mode="aspectFill"></image>
						</view>
						<view class="product-name">
							{{row.product_name}}
						</view>
						<view class="product-price">
							￥{{row.product_price}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 30rpx;"></view>
		<Homepush v-if="is_homepush" :homepush_data="homepush_data"></Homepush>
		<tabBar></tabBar>
	</view>
</template>

<script>
	import diy from '@/components/diy/diy.vue';
	import Homepush from './home-push/home-push.vue';
	import config from '@/config.js';
	export default {
		components: {
			diy,
			Homepush,
		},
		data() {
			return {
				loadding: false,
				/*是否首页推送*/
				is_homepush: false,
				/*首页推送数据*/
				homepush_data: {},
				/*是否正在加载*/
				background: '',
				listData: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				items: [],
				product_list: [],
				page: 1,
				last_page: 0,
				no_more: false,
				indexStop: 0,
				title_name: '',
				bgcolor: '',
				msgNum: 0,
				title_image: false,
				toplogo: '',
				topTitle: '',
				url: '',
				jweixin: null,
				showSearch: false,
				is_auto: 0,
				lng: '',
				lat: '',
				prov: '',
				city: '',
				region: '',
				page: 1,
				list_rows: 15,
				ShopList: [],
				last_page: 0,

			};
		},
		onLoad() {
			let self = this
			uni.getLocation({
				type: 'wgs84',
				success(res) {
					self.lng = res.longitude
					self.lat = res.latitude
					self.getPCR()
				},
				fail(err) {
					self.lng = 116.278632
					self.lat = 39.87055
					self.prov = '山东省'
					self.city = '临沂市'
					self.region = '罗庄区'
					self.page = 1;
					self.ShopList = []
					self.getShopList()
				}

			})
			/*获取订单列表*/
			this.getData();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.ShopList = []
			this.getShopList()
			this.getData();
		},
		methods: {
			goShoplist() {
				uni.navigateTo({
					url: '/pages/shopcate/shopcate'
				})
			},
			goShop(item) {
				uni.navigateTo({
					url: '/pages/shop/shop?shop_supplier_id=' + item.shop_supplier_id
				})
			},
			goPriduct(item) {
				uni.navigateTo({
					url: '/pages/product/detail/detail?product_id=' + item.product_id
				})
			},
			getPCR() {
				let self = this;
				self._post('index/get_city', {
					lng: self.lng,
					lat: self.lat,
				}, function(res) {
					const location = {
						//province_id:res.data.regeocode.addressComponent.province_id,
						//city_id:res.data.regeocode.addressComponent.city_id,
						select_region_id:res.data.regeocode.addressComponent.region_id,
					}
					uni.setStorageSync('cityInfo', JSON.stringify(location));
					self.prov = res.data.regeocode.addressComponent.province;
					self.city = res.data.regeocode.addressComponent.city;
					self.region = res.data.regeocode.addressComponent.district;
					self.page = 1;
					self.ShopList = []
					self.getShopList()
				
					

				});
			},
			getShopList() {
				if (this.loadding) {
					return
				}
				this.loading = true
				let self = this;
				self._post('index/supplier', {
					lng: self.lng,
					lat: self.lat,
					page: self.page,
					list_rows: self.list_rows,
					type: 0,
					sortType: 'all'
				}, function(res) {
					self.ShopList = self.ShopList.concat(res.data.list.data)
					self.last_page = res.data.list.last_page
					self.loading = false
					uni.stopPullDownRefresh()
				}, function() {
					self.loading = false
					uni.stopPullDownRefresh()
				});
			},
			/*获取首页分类*/
			getData() {
				let self = this;
				self._get('index/index', {
					url: self.url
				}, function(res) {
					let auto = uni.getStorageSync('TabBar').is_auto && uni.getStorageSync('TabBar')
						.is_auto != 0;
					self.is_auto = auto;
					self.listData = res.data.list;
					self.background = res.data.background;
					self.items = res.data.items;
					self.title_name = res.data.page.params.title;
					self.bgcolor = res.data.page.style.titleBackgroundColor;
					self.msgNum = res.data.msgNum;
					self.toplogo = res.data.page.style.toplogo;
					self.topTitle = res.data.page.params.name;
					self.setPage(res.data.page);
					self.title_type = res.data.page.params.title_type;
					self.titleTextColor = res.data.page.style.titleTextColor;
					self.loadding = false;
					let homepush_name = uni.getStorageSync('homepush_name');
					if (res.data.setting.homepush.is_open && homepush_name != res.data.setting.homepush
						.name) {
						self.homepush_data = res.data.setting.homepush;
						self.is_homepush = true;
					}

					uni.stopPullDownRefresh();

				});
			},
			go_search() {
				uni.navigateTo({
					url: '/pages/product/search/search'
				})
			},

			// /*获取数据*/
			// getProduct() {
			// 	let self = this;
			// 	let page = self.page;
			// 	self._get('product.product/lists', {
			// 		page: page || 1,
			// 		category_id: self.category_id,
			// 		search: '',
			// 		sortType: 'all',
			// 		sortPrice: 0,
			// 		list_rows: 10,
			// 	}, function(res) {
			// 		uni.stopPullDownRefresh();
			// 		self.product_list = self.product_list.concat(res.data.list.data);
			// 		self.last_page = res.data.list.last_page;
			// 		if (res.data.list.last_page <= 1) {
			// 			self.no_more = true;
			// 		}
			// 		// #ifdef MP
			// 		if (page >= 9) {
			// 			self.no_more = true;
			// 		}
			// 		// #endif
			// 	});
			// },
			/*可滚动视图区域到底触发*/
			// scrolltolowerFunc() {
			// 	let self = this;
			// 	if (self.page < self.last_page) {
			// 		self.page++;
			// 	}
			// 	self.no_more = true;
			// },
			/*设置页面*/
			setPage(page) {
				uni.setNavigationBarTitle({
					title: page.params.name
				});
				let colors = '#000000';
				if (page.style.titleTextColor == 'white') {
					//字母要小写
					colors = '#ffffff'
				}
				uni.setNavigationBarColor({
					frontColor: colors,
					backgroundColor: page.style.titleBackgroundColor
				})
			},
			/*分享当前页面*/
			onShareAppMessage() {
				let self = this;
				return {
					title: self.page.params.share_title,
					path: '/pages/index/index?' + self.getShareUrlParams(),
				};
			},
		}
	};
</script>

<style lang="scss" scoped>
	.new_search_box {
		width: 700rpx;
		margin: 20rpx 0;
		background-color: #ffffff;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		color: #999999;

		.new_address {
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
		}

		.new_search {
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			align-items: center;
		}

	}

	.topTitle {
		padding-left: 20rpx;
		color: #ffffff;
		font-size: 36rpx;
		font-weight: bold;

	}

	.index_bgc {
		width: 100%;
		height: 750rpx;
		background: linear-gradient(#02A550, #F6F6F6);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -99;
	}

	.bg-f2 {
		background-color: #F2F2F2;
	}

	.top_head {
		line-height: 30px;
		padding-left: 26rpx;
	}

	.head_top {
		width: 100%;
		height: var(--status-bar-height);
	}

	.index_log {
		/* width: 154rpx; */
		min-height: 46rpx;
		line-height: 46rpx;
		font-size: 26rpx;
		font-weight: 800;
		color: #FFFFFF;
	}

	.index_log image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 12rpx;
	}

	.top_search {
		/* width: 380rpx; */
		height: 60rpx;
		line-height: 60rpx;
		background: #FFFFFF;
		border-radius: 30rpx 0 0 30rpx;
		font-size: 30rpx;
		margin-left: 10rpx;
		color: #EE1413;
		font-weight: 800;

	}

	.top_search.search-wx {
		width: 385rpx;
	}

	.top_search.special {
		width: 100%;
	}

	.top_search_right {
		background: #FFFFFF;
		border-radius: 0 30rpx 30rpx 0;
		height: 60rpx;
		position: relative;
		/* padding: 0 20rpx; */
		/* border-left: 1rpx solid #D9D9D9; */
	}

	.top_search_right::before {
		content: ' ';
		width: 1rpx;
		height: 20rpx;
		background-color: #D9D9D9;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		position: absolute;
	}

	.top_search_right .icon-saoyisao1 {
		padding: 0 20rpx;
		/* border-left: 1rpx solid #D9D9D9; */
	}

	.top_search .icon-sousuo {
		font-size: 30rpx;
		color: #EE1413;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.top_bg {
		position: absolute;
		top: 0;
		z-index: 0;
		width: 750rpx;
		height: 350rpx;
	}

	.top_bg image {
		width: 750rpx;
		height: 350rpx;
	}

	.nuter {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;
		padding-bottom: 10rpx;
	}

	.nuter view {
		flex: 1;
		font-size: 30rpx;
		text-align: center;
		transition: all 0.5s ease .1s;
	}

	swiper {
		height: 80vh;
		width: 100%;
		overflow: hidden;
	}

	.swiper-item {
		overflow-y: scroll;
		width: 100%;
		height: 99%;
		box-sizing: border-box;
	}

	.banner {
		height: 240upx;
		width: 710upx;
	}

	.banner image {
		width: 710rpx;
		height: 240rpx;
	}

	.new-people .group-bd {
		display: flex;
		justify-content: space-between;
	}

	.new-people .list {
		padding-right: 30rpx;
	}

	.new-people .list .item {
		width: 180rpx;
		text-align: center;
	}

	.new-people .list .price {
		font-size: 24rpx;
	}

	.new-people .list .price .num {
		font-size: 34rpx;
		font-weight: bold;
	}

	.new-people .list button {
		font-size: 24rpx;
		background: #6170ff;
	}

	.new-people .list image {
		width: 180rpx;
		height: 180rpx;
		border: 1px dashed #cccccc;
	}

	.new-people .other {
		width: 230rpx;
	}

	.new-people .other image {
		width: 100%;
	}

	.group-seckill .left .iconfont {
		margin-right: 8rpx;
		color: rgb(226, 35, 26);
		font-size: 40rpx;
	}

	.group-seckill .list .item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 150rpx;
		height: 230rpx;
		border: 1px dashed #cccccc;
	}

	.group-seckill .list text {
		line-height: 60rpx;
		color: #e2231a;
	}

	.group-seckill .list image {
		width: 150rpx;
		height: 150rpx;
	}

	.group-hd .datetime .time {
		padding: 4rpx;
		background: #e2231a;
		color: #ffffff;
		border-radius: 4rpx;
	}

	.group-hd .datetime .point {
		padding: 0 10rpx;
		color: #e2231a;
	}

	.collection-box {
		position: fixed;
		width: 380rpx;
		padding: 20rpx;
		top: 20rpx;
		right: 20rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		border-radius: 16rpx;
		background: #ffffff;
		border: 1px solid #eeeeee;
		box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, .08);
		z-index: 100;
	}

	.collection-box::after {
		position: absolute;
		content: '';
		display: block;
		right: 140rpx;
		top: -15rpx;
		transform: rotate(45deg);
		width: 30rpx;
		height: 30rpx;
		transform: rotate;
		background: #FFFFFF;
		border-left: 1px solid #eeeeee;
		border-top: 1px solid #eeeeee;
	}

	.collection-box .point {
		width: 20rpx;
		height: 20rpx;
		font-size: 60rpx;
		line-height: 0;
		color: #666666;
	}

	.collection-box .point-big {
		font-size: 80rpx;
	}

	.collection-box .close-btn {
		position: absolute;
		padding: 0;
		right: 10rpx;
		top: 10rpx;
		width: 40rpx;
		height: 40rpx;
		line-height: 30rpx;
		background: #FFFFFF;
		color: #999999;
		border-radius: 50%;
	}

	.follow-gzh {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom));
		border-radius: 16rpx;
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .1);
		background: #FFFFFF;
		z-index: 10;
	}

	.follow-gzh.is_auto {
		bottom: calc(env(safe-area-inset-bottom) + 98rpx);
	}

	.follow-gzh .iconfont {
		display: block;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 99;
	}

	.product-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.product_item {
		width: 345rpx;
		margin: 20rpx;
		border-radius: 12rpx;
		background-color: #ffffff;
	}

	.product_item.product_item_right {
		margin-left: 0;
	}

	.product_item .pro_name {
		height: 68rpx;
		line-height: 34rpx;
	}

	.chat {
		width: 40rpx;
		height: 40rpx;
	}

	.newsnum {
		position: absolute;
		top: -8rpx;
		right: -16rpx;
		z-index: 100;
		border-radius: 50%;
		width: 25rpx;
		height: 25rpx;
		text-align: center;
		line-height: 25rpx;
		color: #FFFFFF;
		background-color: #ff6633;
		padding: 5rpx;
		font-size: 20rpx;
	}


	.form_title {
		margin: 20rpx;
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
	}

	.fff_box {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;

		.store_logo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
			}
		}

		.right {
			width: 500rpx;
		}

		.main {
			width: 100%;
			padding-left: 20rpx;
			box-sizing: border-box;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #eeeeee;

			.store_name {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.frsjnr {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 20rpx;
				line-height: 38rpx;

				.fraction {
					font-size: 22rpx;
					color: #1BAE61;
				}
			}

			.cate_show {
				font-size: 22rpx;
				line-height: 38rpx;
				color: #777;
			}

			.onTime {
				margin-top: 10rpx;
				background-color: rgba(27, 174, 97, 0.10);
				color: rgba(27, 174, 97, 1);
				font-size: 20rpx;
				width: 240rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
			}
		}

		.product-list {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			overflow: auto;

			&::-webkit-scrollbar {
				width: 0 !important
			}

			.product-item {
				margin-right: 20rpx;

				.product-image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 16rpx;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 16rpx;
					}
				}

			}

			.product-name {
				width: 150rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
				font-weight: bold;
				margin-top: 4rpx;
				white-space: nowrap;
				/* 确保文本在一行内显示 */
				overflow: hidden;
				/* 隐藏超出容器的文本 */
				text-overflow: ellipsis;
				/* 使用省略符号表示文本被截断 */
			}

			.product-price {
				text-align: center;
				color: #ED4549;
				font-size: 20rpx;
				margin-top: 4rpx;
			}
		}
	}
</style>